<!--
 * @Description: 站点详情
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-12 11:13:53
 * @LastEditTime: 2021-11-10 17:28:44
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="site-info">
    <template v-if="row.siteType === 'CPE'">
      <table v-for="(item, index) in row.lans" :key="index">
        <tr>
          <td>{{item.alias}}</td>
          <td>{{item.name ? item.name.toUpperCase() : '-'}}</td>
        </tr>
        <tr v-if="item.vlanOpera">
          <td>VLAN</td>
          <td>{{item.vlan}}</td>
        </tr>
        <tr>
          <td>VPN</td>
          <td>{{item.vpnUserLabel ? item.vpnUserLabel : '-'}}</td>
        </tr>
        <tr>
          <td>限速</td>
          <td>{{item.enableRateLimit ? item.rateLimitValue + 'Mbps' : '关闭'}}</td>
        </tr>
        <tr>
          <td>虚拟IP</td>
          <td>{{item.fictitiousGatewayIp ? item.fictitiousGatewayIp : '-'}}</td>
        </tr>
        <template v-if="row.ha">
          <tr>
            <td>网关1-IP</td>
            <td>{{item.oneGatewayIp ? item.oneGatewayIp + ' - 优先级：' + item.oneGatewayPriority : '-'}}</td>
          </tr>
          <tr>
            <td>网关2-IP</td>
            <td>{{item.twoGatewayIp ? item.twoGatewayIp + ' - 优先级：' + item.twoGatewayPriority : '-'}}</td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <td>网关IP</td>
            <td>{{item.oneGatewayIp ? item.oneGatewayIp + ' - 优先级：' + item.oneGatewayPriority : '-'}}</td>
          </tr>
        </template>
        <tr>
          <td>DHCP</td>
          <td>{{item.enableDhcp ? '开启' : '关闭'}}</td>
        </tr>
        <tr>
          <td>DNS Proxy</td>
          <td>{{item.dnsProxy ? '开启' : '关闭'}}</td>
        </tr>
        <template v-if="item.enableDhcp">
          <tr>
            <td>地址池</td>
            <td>{{item.ipPoolFrom + '-' + item.ipPoolTo}}</td>
          </tr>
          <template v-if="!item.dnsProxy">
            <tr>
              <td>主DNS</td>
              <td>{{item.primaryDns}}</td>
            </tr>
            <tr>
              <td>备DNS</td>
              <td>{{item.backupDns}}</td>
            </tr>
          </template>
        </template>
        <tr>
          <td>创建时间</td>
          <td>{{row.extAttrs.createVpnTime ? row.extAttrs.createVpnTime : '-'}}</td>
        </tr>
      </table>
    </template>
    <table v-for="(item, index) in row.wans" :key="index">
      <template v-if="row.ha">
        <!-- 端口 -->
        <tr>
          <td>
            <span v-if="item.standByRelation === 'ONE'">网关1-{{item.alias}}</span>
            <span v-if="item.standByRelation === 'TWO'">网关2-{{item.alias}}</span>
          </td>
          <td>{{item.name ? item.name.toUpperCase() : '-'}}</td>
        </tr>
      </template>
      <template v-else>
        <!-- 端口 -->
        <tr>
          <td>{{item.alias}}</td>
          <td>{{item.name ? item.name.toUpperCase() : '-'}}</td>
        </tr>
      </template>
      <tr>
        <td>线路类型</td>
        <td>{{item.lineType === 'INTERNET' ? '因特网' : '专线'}}</td>
      </tr>
      <tr>
        <td>带宽值</td>
        <td>{{item.upbandWidth ? item.upbandWidth + 'Mbps' : '-'}}</td>
      </tr>
      <tr>
        <td>广域网优化</td>
        <td>{{item.enableWanOptimization ? '开启' : '关闭'}}</td>
      </tr>
      <tr>
        <td>运营商</td>
        <td>
          <span v-if="item.netOperator === 'MOBILE'">移动</span>
          <span v-if="item.netOperator === 'UNICOM'">联通</span>
          <span v-if="item.netOperator === 'TELECOM'">电信</span>
          <span v-if="item.netOperator === 'OTHER'">其他</span>
        </td>
      </tr>
      <tr>
        <td>优先级</td>
        <td>
          <span v-if="item.priority === 'HIGH'">高</span>
          <span v-if="item.priority === 'CENTER'">普通</span>
          <span v-if="item.priority === 'LOW'">低</span>
        </td>
      </tr>
      <tr>
        <td>获取方式</td>
        <td>{{item.addressAcquisition}}</td>
      </tr>
      <template v-if="item.addressAcquisition === 'PPPOE'">
        <tr>
          <td>用户名</td>
          <td>{{item.userName}}</td>
        </tr>
        <tr>
          <td>密码</td>
          <td>{{item.password}}</td>
        </tr>
      </template>
      <template v-if="item.addressAcquisition === 'STATIC'">
        <tr>
          <td>地址/掩码</td>
          <td>{{item.ip}}</td>
        </tr>
        <tr>
          <td>网关地址</td>
          <td>{{item.gatewayIp}}</td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
export default {
  props: ['row']
};
</script>

<style lang="scss" scoped>
.site-info {
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    margin-bottom: 10px;
    tr {
      width: 100%;
      td {
        padding: 5px 15px;
        line-height: 30px;
        &:first-child {
          width: 120px;
          text-align: center;
          background: #f8f8f9;
        }
        &:last-child {
          width: calc(100% - 170px);
        }
      }
    }
  }
}
</style>